<template>
  <div>
    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addRow()">新增</el-button>
    <el-table :data="dataList" ref="gridTable" highlight-current-row>
		  <el-table-column v-for="item in columnList" :key="item.ssAttrId" :label="item.ssAttrName">
        <template slot-scope="scope">
          <el-input disabled v-model="scope.row[item.ssAttrName].ssValue"></el-input>
        </template> 
      </el-table-column>
      <!-- <el-table-column v-for='item in columnData' :prop="item.ssvalue" :key="item.ssattrid" :label="item.ssattrname"></el-table-column> -->
      <!-- <el-table-column>
        <template slot-scope="scope">
          <el-table-column v-for='item in scope.row.columnData' :prop="item.ssvalue" :key="item.ssattrid" :label="item.ssattrname"></el-table-column>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" circle
                          @click="update(scope.$index, scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" circle
                          @click="del(scope.$index, scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 预览页面 -->
    <el-dialog title="新增修改数据" :visible.sync="addOrUpdate" width="790px">
      <!-- <div>
          <h3 class="tb-title">{{pageTitle}}</h3>
          <div class="tb-sub-title">{{description}}</div>
      </div> -->
      <div class="contentdiv">

        <div class="panel paneldefault" v-for="item in tableSetJsonList" :key="item.orderno">
          <div class="panelheading" v-if="item.type == 'title'">
            <h3 class="paneltitle">{{item.label}}</h3>
          </div>
          <div v-bind:class="{panelbody:item.hasdetail}">
            <stringinput
              v-if="item.type == 'stringinput' && hackReset == true"
              v-bind:tableSetJson="item"
              v-bind:renumin="getdata(item.type, item.name)"
              v-on:listenToStringInput="childOuter($event,item.name,item.type)"
            ></stringinput>
            <dateinput
              v-if="item.type == 'dateinput' && hackReset == true"
              v-bind:tableSetJson="item"
              v-bind:renumin="getdata(item.type, item.name)"
              v-on:listenToDateInput="childOuter($event,item.name,item.type)"
            ></dateinput>
            <numinput
              v-if="item.type == 'numinput' && hackReset == true"
              v-bind:tableSetJson="item"
              v-bind:renumin="getdata(item.type, item.name)"
              v-on:listenToNumInput="childOuter($event,item.name,item.type)"
            ></numinput>
            <qualifiledradio
              v-if="item.type == 'qualifiledradio' && hackReset == true"
              v-bind:tableSetJson="item"
              v-bind:renumin="getdata(item.type, item.name)"
              v-on:listenToRadioInput="childOuter($event,item.name,item.type)"
            ></qualifiledradio>
            <ishaveradio
              v-if="item.type == 'ishaveradio' && hackReset == true"
              v-bind:tableSetJson="item"
              v-bind:renumin="getdata(item.type, item.name)"
              v-on:listenToRadioInput="childOuter($event,item.name,item.type)"
            ></ishaveradio>
            <dropdown
              v-if="item.type == 'dropdown' && hackReset == true"
              v-bind:tableSetJson="item"
              v-bind:renumin="getdata(item.type, item.name)"
              v-on:listenToSelectInput="childOuter($event,item.name,item.type)"
            ></dropdown>
            <multipoints
              v-if="item.type == 'multipoints' && hackReset == true"
              v-bind:tableSetJson="item"
              v-bind:renumin="getdata(item.type, item.name)"
              v-on:listenToMultipoints="childOuter($event,item.name,item.type)"
            ></multipoints>
          </div>
          
          <div
            v-bind:class="{secondClass:itemd.hasdetail,panel:itemd.hasdetail,paneldefault:itemd.hasdetail}"
            v-for="itemd in item.detail"
            :key="itemd.orderno"
          >
            <div class="panelheading" v-if="itemd.type == 'title'">
              <h3 class="paneltitle">{{itemd.label}}</h3>
            </div>
            <div v-bind:class="{panelbody:itemd.hasdetail}">
              <stringinput
                v-if="itemd.type == 'stringinput' && hackReset == true"
                v-bind:tableSetJson="itemd"
                v-bind:renumin="getdata(itemd.type, itemd.name)"
                v-on:listenToStringInput="childOuter($event,itemd.name,itemd.type)"
              ></stringinput>
              <dateinput
                v-if="itemd.type == 'dateinput' && hackReset == true"
                v-bind:tableSetJson="itemd"
                v-bind:renumin="getdata(itemd.type, itemd.name)"
                v-on:listenToDateInput="childOuter($event,itemd.name,itemd.type)"
              ></dateinput>
              <numinput
                v-if="itemd.type == 'numinput' && hackReset == true"
                v-bind:tableSetJson="itemd"
                v-bind:renumin="getdata(itemd.type, itemd.name)"
                v-on:listenToNumInput="childOuter($event,itemd.name,itemd.type)"
              ></numinput>
              <qualifiledradio
                v-if="itemd.type == 'qualifiledradio' && hackReset == true"
                v-bind:tableSetJson="itemd"
                v-bind:renumin="getdata(itemd.type, itemd.name)"
                v-on:listenToRadioInput="childOuter($event,itemd.name,itemd.type)"
              ></qualifiledradio>
              <ishaveradio
                v-if="itemd.type == 'ishaveradio' && hackReset == true"
                v-bind:tableSetJson="itemd"
                v-bind:renumin="getdata(itemd.type, itemd.name)"
                v-on:listenToRadioInput="childOuter($event,itemd.name,itemd.type)"
              ></ishaveradio>
              <dropdown
                v-if="itemd.type == 'dropdown' && hackReset == true"
                v-bind:tableSetJson="itemd"
                v-bind:renumin="getdata(itemd.type, itemd.name)"
                v-on:listenToSelectInput="childOuter($event,itemd.name,itemd.type)"
              ></dropdown>
              <multipoints
                v-if="itemd.type == 'multipoints' && hackReset == true"
                v-bind:tableSetJson="itemd"
                v-bind:renumin="getdata(itemd.type, itemd.name)"
                v-on:listenToMultipoints="childOuter($event,itemd.name,itemd.type)"
              ></multipoints>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrUpdate = false">取 消</el-button>
        <el-button type="primary" @click="gridSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
        <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="delVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteRow">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue';
import stringinput from "../report/stringinput";
import dateinput from "../report/dateinput.vue";
import numinput from "../report/numinput.vue";
import qualifiledradio from "../report/qualifiledradio.vue";
import dropdown from "../report/dropdown.vue";
import flowrecord from "../report/flowrecord.vue";
import multipoints from "../report/multipoints.vue";
import imgupload from "../report/imgupload.vue";
import ishaveradio from "../report/ishaveradio.vue";
import { getGridComData_Url, getGridMaxRowNo_Url, deleteRecordnumDetail_Url} from "@/config/compentsapi"

export default {
  name: "grid",
  components: {
    stringinput,
    dateinput,
    numinput,
    qualifiledradio,
    dropdown,
    flowrecord,
    multipoints,
    imgupload,
    ishaveradio
  },
  props: {
    tableSetJson: {
      type: Object
    },
    renumin: {
      type: Object
    }
  },
  data() {
    return {
      globalRnId: "", //全局rnid，用于删除
      globalRowno: "", //全局行号，用于删除
      delVisible: false, //删除提示框
      hackReset: false, //重新加载
      addOrUpdate: false, //新增修改dialog
      tableSetJsonList: this.tableSetJson.detail, //表样样式
      mulrenum: this.renumin, //传入的数据
      columnList: [],
      dataList: [], //数据
      detailList: [],
      detailObject: {}, //单行数据
      fillInListBodyData: {}, // 填充数据
      sign: "1", // 1新增、2修改
      rowIndex: 0,
      ifSubmit: true,
      maxRowNo: 0
    };
  },
  created() {
    this.getColumns();
    this.getDataList();
    this.getGridMaxRowNo();
  },
  methods: {
    getDataList(){
      getGridComData_Url({
        rnid:this.mulrenum.rnId
      }).then(res => {
        if (res.data.success === true) {
          this.dataList = res.data.data;
        } else {
        }
      });
    },
    getGridMaxRowNo() {
      getGridMaxRowNo_Url({
        rnid:this.mulrenum.rnId
      }).then(res => {
        if (res.data.success === true) {
          this.maxRowNo = res.data.data;
        } else {
        }
      });
    },
    getColumns() {
      for (let column of this.tableSetJsonList) {
        var renumdetail = {
          rowno: "",
          rndId: "", 
          rnId: "", 
          runCode: "",
          rndNo: "",
          ssAttrId: "",
          ssValue: "",
          ssValue1: "",
          ssValue2: "",
          ssAttrName: ""
        }
        renumdetail.runCode = column.name;
        renumdetail.ssAttrId = column.orderno;
        renumdetail.ssAttrName = column.name;
        this.columnList.push(renumdetail);
      }
    },
    // 新增
    addRow() {
      this.sign = "1";
      this.hackReset = false;
      // 延时刷新组件
      setTimeout(() => {
        this.hackReset = true;
      },100);
      this.addOrUpdate = true;
      this.maxRowNo++;
    },
    update(index, row) {
      this.rowIndex = index;
      this.sign = "2";
      this.hackReset = false;
      // 延时刷新组件
      setTimeout(() => {
        this.hackReset = true;
      },100);
      this.addOrUpdate = true;
      // 子类数组转父类数组处理
      var tempEntity = {};
      for (var index in row) {
        var renum = {
          rnId: row[index].rnid,
          raId: "",
          rnuRaid: row[index].rndId,
          rnuCode: row[index].runCode, //验评指标明细编号
          rnuType: row[index].runtype, //检测项编辑类型
          rnuContent: "", //检测值验评内容
          rnuRadioContent: row[index].ssValue, //检测指标状态验评内容
          rsDes: "", //描述（大字段）
          rnuContent1: "", //检测指标验评内容扩展字段1
          rnuContent2: "", //检测指标验评内容扩展字段2
          rnuRadioContent1: "", //验评指标状态验评扩展内容1
          rnuRadioContent2: "", //验评指标状态验评扩展内容1
          rnuNo: row[index].rowno, //序号
          zlRecordNumDetails: []
        };
        tempEntity[index]= renum;
      }
      this.fillInListBodyData = tempEntity;
    },
    // 删除
    del(index, row) {
      this.delVisible = true;
      this.rowIndex = index;
      this.globalRnId = row[this.columnList[0].ssAttrName].rnId;
      this.globalRowno = row[this.columnList[0].ssAttrName].rowno;
    },
    deleteRow() {
      deleteRecordnumDetail_Url({
        rnid: this.globalRnId,
        rowno: this.globalRowno
      }).then(res => {
        if (res.data.success) {
          this.$message.success("删除成功");
          this.dataList.splice(this.rowIndex, 1);
          this.delVisible = false;
        } else {
          this.$message.success("删除失败");
        }
        // 使用后，rowIndex初始化
        this.rowIndex = 0;
      });
    },
    // 获取数据
    getdata(type,name) {
      if (this.sign === "1") {
        var renum = {
          rnId: "",
          raId: "",
          rnuRaid: "",
          rnuCode: "", //验评指标明细编号
          rnuType: "", //检测项编辑类型
          rnuContent: "", //检测值验评内容
          rnuRadioContent: "", //检测指标状态验评内容
          rsDes: "", //描述（大字段）
          rnuContent1: "", //检测指标验评内容扩展字段1
          rnuContent2: "", //检测指标验评内容扩展字段2
          rnuRadioContent1: "", //验评指标状态验评扩展内容1
          rnuRadioContent2: "", //验评指标状态验评扩展内容1
          rnuNo: "", //序号
          zlRecordNumDetails: []
        };
        if (type === "ishaveradio") {
          renum.rnuRadioContent = "0";
        }
        return renum;
      } else {
        if (this.fillInListBodyData[name] == null ||
        this.fillInListBodyData[name] == "") {
          var renum = {
            rnId: "",
            raId: "",
            rnuRaid: "",
            rnuCode: "", //验评指标明细编号
            rnuType: "", //检测项编辑类型
            rnuContent: "", //检测值验评内容
            rnuRadioContent: "", //检测指标状态验评内容
            rsDes: "", //描述（大字段）
            rnuContent1: "", //检测指标验评内容扩展字段1
            rnuContent2: "", //检测指标验评内容扩展字段2
            rnuRadioContent1: "", //验评指标状态验评扩展内容1
            rnuRadioContent2: "", //验评指标状态验评扩展内容1
            rnuNo: "", //序号
            zlRecordNumDetails: []
          };
          if (type === "ishaveradio") {
            renum.rnuRadioContent = "0";
          }
          return renum;
        } else {
          return this.fillInListBodyData[name];
        }
      }
    },
    /* 获取子组件传递给父组件的数字数据 */
    childOuter(event, i, type) {
      var renumdetail = {
        rndId: event.rnuRaid, 
        rnId: "", 
        rowno: this.maxRowNo,
        runCode: event.rnuCode,
        runType: event.rnuType,
        rndNo: "",
        ssAttrId: "",
        ssValue: event.rnuRadioContent,
        ssValue1: "",
        ssValue2: "",
        ssAttrName: ""
      }
      for (let column of this.tableSetJsonList) {
        if (renumdetail.runCode == column.name) {
          renumdetail.ssAttrId = column.orderno;
          renumdetail.ssAttrName = column.name;
          renumdetail.rndNo = column.orderno;
        }
      }
      this.detailObject[i] = renumdetail;
    },
    // 提交事件
    gridSubmit() {
      this.addOrUpdate = false;
      if (this.sign === "1") {
        this.mulrenum.rnuCode = this.tableSetJson.name;
        this.mulrenum.rnuType = this.tableSetJson.type;   
        this.mulrenum.rnuNo = this.tableSetJson.orderno;
        var tempEntity={};
        for (var index in this.detailObject) {
          tempEntity[index]= this.detailObject[index];
        }
        this.dataList.push(tempEntity);
      } else {
        var tempEntity={};
        for (var index in this.detailObject) {
          tempEntity[index]= this.detailObject[index];
        }
        // this.dataList[this.rowIndex] = tempEntity;
        // 数组对象改变及时渲染
        Vue.set(this.dataList, this.rowIndex, tempEntity);
      }
      // 使用后，rowIndex初始化
      this.rowIndex = 0;
      // 数据处理便于新增
      for (var index in this.detailObject) {
        this.detailList.push(this.detailObject[index]);
      }
      this.mulrenum.zlRecordNumDetails = this.detailList;
      this.$emit("listenToGrid", this.mulrenum);
    }
  }
};
</script>